<template>
  <div class="prolist">
    <el-table :data="displayTableData" style="width: 100%" height="100%">
      <el-table-column label="图片" prop="img1" width="180">
        <template #default="scope">
          <img :src="scope.row.img1" alt="" width="100" />
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="category" />
      <el-table-column label="商品名称" prop="proname" />
      <el-table-column label="原价" prop="originprice" />
      <el-table-column label="销量" prop="sales" sortable />
      <el-table-column align="right">
        <template #header>
          <el-input
            v-model="search"
            size="small"
            placeholder="输入搜索关键字"
            @keydown.enter.native="searchlist"
          />
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="No Data" />
      </template>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        v-model:current-page="page"
        :page-size="pageSize"
        :total="tableData.length"
      />
    </div>
  </div>
</template>

<script>
/* 获取,筛选数据 */
import { getproData,sortprodata } from "@/api/pro.js";


export default {
  data() {
    return {
      // 存放数据
      tableData: [],
      // 当前页
      page: 1,
      // 每页显示条数
      pageSize: 5,
      search: "",
      category:'',
    };
  },
  computed: {
    displayTableData() {
      return this.tableData.slice((this.page - 1) * 5, this.page * 5);
    },
  },
  methods: {
    /* 获取商品数据 */
    getlist() {
      getproData().then((res) => {
        //console.log(res.data);
        this.tableData = res.data;
      });
    },
    //搜索
    searchlist(){
      sortprodata(this.category,this.search).then((res)=>{
          //console.log(res.data);
          this.tableData = res.data;
        })
      },
    //编辑按钮
    handleEdit(index, row) {
      console.log(index, row);
    },
    //删除按钮
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>
<style scoped>
.prolist {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
img {
  display: block;
  height: 100px;
}
.pagination {
  margin: 10px 0;
  display: flex;
  justify-content: flex-end;
}
.el-table {
  flex: 1;
}
</style>
